<template>
  <div>
    <!-- 顶部导航栏 -->
    <div class="Navigation_top">
      <!-- 返回的盒子 -->
      <div class="get_back_box">
        <router-link to="/">
          <img src="../assets/return.png" alt="">
        </router-link>
        <div class="line"></div>
        <router-link to="/">
          <img src="../assets/home.png" alt="">
        </router-link>
      </div>
      <p>演出预告</p>
    </div>
    <!-- 底部选项 -->
    <div class="Navigation_bottom">
      <!-- 整体的选项盒子 -->
      <div class="option_box">
        <div class="option_single">
          <div class="highlight"></div>
          杂技
        </div>
        <div class="option_single">
          跳舞
        </div>
        <div class="option_single">
          唱歌
        </div>
      </div>
      <img src="../assets/widgets.png" alt="">
    </div>

    <div class="timeline">
      <!-- 舞狮子 -->
      <div class="timeline_item">
        <div class="time_card">
          <div class="time_range">14:00:00 - 16:00:00</div>
          <h2 class="activity_title">舞狮子</h2>
          <p class="activity_desc">
            是中国优秀的民间艺术，古时又称为“太平乐”<br>
            舞狮有南北之分，南狮又称醒狮。
          </p>
        </div>
      </div>

      <!-- 走钢丝 -->
      <div class="timeline_item timeline_item_color">
        <div class="time_card timeline_item_color">
          <div class="time_range timeline_item_color">16:00:00 - 18:00:00</div>
          <h2 class="activity_title timeline_item_color">走钢丝</h2>
          <p class="activity_desc timeline_item_color">
            走钢丝简称走索，也就是走钢索，表演者站在只<br>
            有一个绳子粗的位置。
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

</script>

<style scoped>
a {
  display: inline;
  width: auto;
  height: 35px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  color: black;
  text-decoration: none;
  /* 可选：移除下划线 */
}

/* 导航栏 */
.Navigation_top {
  width: 100%;
  height: 40px;
  text-align: center;
  position: relative;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
}

/* 返回按钮 */
.get_back_box {
  width: 60px;
  height: 60%;
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: space-around;
  border-radius: 15px;
  margin-top: 8px;
  margin-left: 10px;
  border: #999999 solid 1px;
}

.get_back_box img {
  width: 18px;
}

/* 分割线 */
.line {
  width: 1px;
  height: 60%;
  background-color: #999999;
}

/* 底部导航栏 */
.Navigation_bottom {
  width: 100%;
  padding: 1% 3%;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.Navigation_bottom img {
  width: 20px;
}

/* 单个选项 */
.option_box {
  width: 45%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.option_single {
  position: relative;
}

/* 高亮的下划线 */
.highlight {
  width: 30px;
  height: 5px;
  left: 3%;
  bottom: -5px;
  border-radius: 10px;
  background-color: #2A82E4;
  position: absolute;
}

/* 时间线容器 */
.timeline {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

/* 时间线竖线 */
.timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 10px;
  bottom: 0;
  width: 2px;
  background: #e0e0e0;
}

/* 单个时间节点 */
.timeline_item {
  position: relative;
  margin-bottom: 30px;
  padding-left: 50px;
}

/* 时间点圆标 */
.timeline_item::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 1;
  background-color: #999999;
}

/* 时间框样式 */
.time_card {
  background: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 时间标题 */
.time_range {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 16px;
}

/* 活动名称 */
.activity_title {
  color: #333;
  font-size: 18px;
  margin-bottom: 10px;
}

/* 活动描述 */
.activity_desc {
  color: #666;
  line-height: 1.6;
  font-size: 14px;
}

.timeline_item_color{
  color: #95EA6C;
}
</style>